<template>
  <div class="jifen">
    <header>
      <div class="left"><a><img src="../assets/img/m1.png" ></a></div>
      <div class="center">{{msg}}</div>  
      <div class="right"><a><img src="../assets/img/m46.png"></a></div>
    </header>
    <main>
    <div class="kong"></div>
    <div class="top">
      <div class="shang">
        <p><span>{{fen}}分</span></p>
        <p>小积分，有大用，多赞一些屯起来</p>
      </div>
      <div class="xia">
        <div>
          <router-link to="jifenzhu">
          <img src="../assets/img/m14.png"><p>积分商城</p>
        </router-link>
        </div>
        <div>
        <router-link to="duihuanjilu">
          <img src="../assets/img/m15.png"><p>兑换记录</p>
        </router-link>
        </div>
      </div>
    </div>
    <div class="kong"></div>
    <div class="mingxi">
      <div class="top">
        <div></div>
        <p>积分明细</p>
        <div></div>
      </div>
      <ul>
        <li>
          <div class="shang">
            <div class="left">
              <img src="../assets/img/m52.png"><p>兑换现金</p>
            </div>
            <div class="right">
              -500
            </div>
          </div>
          <div class="time">
            2015-9-7
          </div>
        </li>
        <li>
          <div class="shang">
            <div class="left">
              <img src="../assets/img/m52.png"><p>兑换现金</p>
            </div>
            <div class="right">
              -500
            </div>
          </div>
          <div class="time">
            2015-9-7
          </div>
        </li>
        <li>
          <div class="shang">
            <div class="left">
              <img src="../assets/img/m52.png"><p>兑换现金</p>
            </div>
            <div class="right">
              -500
            </div>
          </div>
          <div class="time">
            2015-9-7
          </div>
        </li>
        <li>
          <div class="shang">
            <div class="left">
              <img src="../assets/img/m52.png"><p>兑换现金</p>
            </div>
            <div class="right">
              -500
            </div>
          </div>
          <div class="time">
            2015-9-7
          </div>
        </li>
      </ul>
    </div>
    
    </main>
  </div>

</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: '我的积分',
      fen: '500'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
@import '.././assets/css/reset.css';
  @import '.././assets/css/index.less';
header{
  position: fixed;
  top: 0;
  width: 100%;
  .height(140);
  .font-size(40);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #28a85b;
  color:#ffffff;
  .left,.right{
      .width(160) ;
  }
  .center{
      flex: 1;
      text-align: center;
  }
  .left{
    a{
      display: block;
      img{
        .height(40);
        .padding(0,0,0,40);
        display: block;
      }
    }
  }
  .right{
    a{
      display: block;
      img{
        .height(40);
        .padding(0,0,0,50);
        display: block;
      }
    }
  }
}
main{
  .padding(140,0,0,0);
  .kong{
    .height(20);
    background: #f3f1f2;
  }
  .top{
    
    .shang{
      p{
        .padding(0,58,0,58);
        .font-size(30);
        span{
          color: #fd776c;
          .font-size(33);
          .line-height(110);
        }
      }
    }
    .xia{

       .height(100);
      display: flex;
      justify-content: space-between;
      .padding(60,58,0,58);
      align-items: center;
      div{
        a{
          display: block;
          text-decoration: none;
        display: flex;
        img{
        .height(48);
        display: block;

        }
        p{
          .line-height(48);
          .font-size(30);
        }}
      }
    }
  }
  .mingxi{
    .top{
      display: flex;
      justify-content: center;
      align-items: center;
      div{
        border:2px solid black;
        .width(80);
      }
      p{
        .padding(35,40,35,40);
        .font-size(30);
      }
    }
    ul{
      li:nth-child(1){
          border:none;
      }
      li{
        .padding(20,40,0,40);
        border-top:2px solid #cacaca;

        .shang{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .left{
            display: flex;
            .line-height(50);
            .font-size(30);
            img{
              display: block;
              .height(50);
              .padding(0,20,0,0);
            }
          }
          .right{
            color: #ba5543;
             .font-size(30);
          }
        }
        .time{
          color: #7e7e7e;
          .line-height(60);
            .font-size(30);
        }
      }
    }
  }
}
</style>
